<template>
  <div class="dmui-select" @mouseover="mouseover" @mouseleave="mouseleave">
    <!-- 选择结果展示 -->
    <div class="dmui-select-result pointer" @click="selectorToggle">{{ name }}</div>
    <cmTranPropo :show="showOptions">
      <div class="dmui-options">
        <div
          class="dmui-option pointer"
          :class="{
            selected:
              (item.value === Value || item.value === value) &&
              name === item.name
          }"
          v-for="item of items"
          :key="item.value"
          @click="getMenu(item)"
          v-html="item.name"
        ></div>
      </div>
    </cmTranPropo>
  </div>
</template>

<script>
import cmTranPropo from "./tran.propo";
export default {
  name: "imSelector",
  props: {
    placeholder: {
      type: String,
      default: "-请选择-"
    },
    //默认值
    value: {
      type: String | Number | Boolean,
      default: false
    },
    //选项list
    items: {
      type: Array,
      default: function() {
        return [
          {
            name: "测试一",
            value: 0
          },
          {
            name: "测试二",
            value: 1
          },
          {
            name: "测试三",
            value: 2
          }
        ];
      }
    },
    hoverShow: {
      type: Boolean,
      default: false
    }
  },
  components: { cmTranPropo },
  data() {
    return {
      Value: false,
      name: "",
      height: 0,
      showOptions: false
    };
  },
  watch: {
    value(val, old) {
      setTimeout(() => {
        this.getName();
      }, 0);
    }
  },
  created() {
    this.getName();
  },
  methods: {
    selectorToggle: function(event) {
      this.showOptions = !this.showOptions;
      this.$emit("click", event);
    },
    getMenu: function(item) {
      this.Value = item.value;
      this.getName(item.value);
      this.$emit("chose", item);
    },
    mouseover: function() {
      if (this.hoverShow) this.showOptions = true;
    },
    mouseleave: function(event) {
      this.showOptions = false;
      this.$emit("mouseleave", event);
    },
    getName(value) {
      let key = value === undefined ? this.value : value;
      if (key === false || key === undefined) this.name = this.placeholder;
      else
        this.name = this.items
          .filter(v => {
            return v.value === key;
          })
          .map(v => v.name)
          .join(",");
    }
  }
};
</script>

<style scoped lang="less">
.dmui-select {
  display: inline-block;
  width: 100px;
  background: #25262a;
  color: #6e6f75;
}
.dmui-select-result {
  padding: 6px 10px;
}

.dmui-options {
  background: transparent;
  color: #fff;
  .dmui-option:first-child {
    border-top: 0 none;
  }
}
.dmui-option {
  background: #37383d;
  border-top: 1px solid #141519;
  padding: 8px;
  transition: background 150ms linear;
  &:hover,
  &.selected {
    background: #2e2f34;
  }
}
/deep/ .dmui-operops-transition {
  &._allowUp {
    bottom: 0.28rem;
  }
}
</style>
